<template>
	<view>
		<view class="appraisal-content">
			<view class="appraisal-title">本次用餐体验还满意么？</view>
			<view class="rating-title">
				<view class="rating-level">
					<view class="particle-level" v-for="(items, index) in 5" :key="index" @click="changeLevel(index)">
						<image style="width: 100%; height: 100%;" :src="index < level?star.full:star.empty"></image>
					</view>
				</view>
				<view class="rating-fraction">{{ level }}.0分</view>
			</view>
			<view class="feedback-content">
				<textarea v-model="content" class="feedback-textarea" placeholder-style="color:#B2B2B2" placeholder="感谢您留下宝贵意见及建议（10-200字）" />
				</view>
		</view>
		<view>
			<button class="submit-feedback" @click="submitFeedback()"> {{ title }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				level: 5,
				id: undefined,
				content: "",
				comment: 0,
				star: {
					full: '/static/images/icons/icon_star@3x.png',
					empty: '/static/images/icons/icon_star_pre@3x.png'
				},
				title: '提交'
			}
		},
		onLoad(options) {
			this.id = options.id
			this.comment = options.comment
			if(options.comment === '1'){
				this.title = '返回';
				this.viewReviews()
			}
		},
		methods: {
			// 改变评级
			changeLevel(index){
				if(this.comment === '0'){
					this.level = index + 1
				}
			},
			submitFeedback(){
				if(this.comment === '1'){
					uni.navigateBack(1)
				}else{
					const path = {
					    app:"wx",
					    api:"api_wx_order_orderComment",
					    version:"1.0",
					    type:"1",
					    data:{
					        id: this.id,
					        content: this.content,
					        level: this.level
					    }
					}
					this.sendSock(path)
				}
			},
			// 查看评价
			viewReviews(){
				const path = {
				    app:"wx",
				    api:"api_wx_order_getComment",
				    version:"1.0",
				    type:1,
				    data:{
				        id:this.id
				    }
				}
				this.sendSock(path)
			},
			sendSock(path) {
				if (this.$store.state.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(path)
					});
				} else {
					this.$store.state.socketMsgQueue.push(JSON.stringify(path));
				}
				const _this = this
				uni.onSocketMessage(function(res) {
					_this.getSock(res.data)
				});
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else {
						if (resj.api === "api_wx_user_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wx_user_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wx_order_orderComment") {
							uni.showToast({
								icon: "none",
								title: '评价成功',
								duration: 2000
							});
							const _this = this;
							uni.navigateTo({
								url: '/pages/order/index?statu=2' + '&' + _this.version
							})
						} else if (resj.api === "api_wx_order_getComment"){
							const data = resj.data;
							this.level = data.level;
							this.content = data.content;
						}
					}
				}
			}
		}
	}
</script>

<style>
	.appraisal-content{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.appraisal-title{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.feedback-content{
		background-color: #F6F4F5;
		width: 100%;
		height: 360rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.feedback-textarea{
		width: 100%;
		height: 100%;
	}
	.submit-feedback{
		width:690rpx;
		height:98rpx;
		background:linear-gradient(0deg,rgba(255,195,36,1),rgba(255,211,94,1));
		box-shadow:0rpx 5rpx 5rpx 0rpx rgba(255,195,36,0.2);
		border-radius:49rpx;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top:90rpx;
		line-height: 1;
	}
	.submit-feedback:after{
		content: none;
	}
	.rating-title{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
		
	.rating-fraction{
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,76,76,1);
		margin: 30rpx 0;
	}

	.rating-level{
		display: flex;
		margin: 30rpx 0;
	}
	.particle-level{
		width: 48rpx;
		height: 48rpx;
	}
	.particle-level:not(:first-child){
		margin-left: 24rpx;
	}
</style>
